<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-07-16 15:13  --
--  @version: 1.0              --
-------------------------------->
<!-- 更新用户 -->

<template>
  <!-- 弹出框 -->
  <el-dialog
      :modal="dialogEditUserVisible"
      title="修改用户"
      width="40%"
      @close="handleClose">

    <!--  表单  -->
    <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="editRules"
        label-width="80px"
        class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="dialogForm.username"/>
      </el-form-item>

      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="dialogForm.phone"/>
      </el-form-item>

      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="dialogForm.companyName"/>
      </el-form-item>

      <el-form-item label="账号: ">
        <el-tooltip :content="dialogForm.accountNonExpired === true ? '未过期' : '过期'" placement="right">
          <el-switch v-model="dialogForm.accountNonExpired"
                     active-text="过期"
                     inactive-text="未过期"
          />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="账号: ">
        <el-tooltip :content="dialogForm.accountNonLocked === true ? '未锁定' : '锁定'" placement="right">
          <el-switch v-model="dialogForm.accountNonLocked"
                     active-text="锁定"
                     inactive-text="未锁定"
          />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="凭证: ">
        <el-tooltip :content="dialogForm.credentialsNonExpired === true ? '未过期' : '过期'" placement="right">
          <el-switch v-model="dialogForm.credentialsNonExpired"
                     active-text="过期"
                     inactive-text="未过期"
          />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="账号: ">
        <el-tooltip :content="dialogForm.enabled === true ? '可用' : '不可用'" placement="right">
          <el-switch v-model="dialogForm.enabled"
                     active-text="可用"
                     inactive-text="不可用"
          />
        </el-tooltip>
      </el-form-item>

    </el-form>

    <!--  按钮  -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm(dialogFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {validatorInput, validatorPhone, validatorUsername} from "@/validator";
import {SUCCESS} from "@/utils/constants.ts";
import {editUser} from "@/api/auth/user.ts";
import {RespResult} from "@/api";

/*接收父类传过来的值*/
const props = defineProps({
  dialogEditUserVisible: {
    type:Boolean,
    required:true
  },
  userRowInfo: {
    type: {},
    required: true
  }
})

/*const props = defineProps({
  dialogAddUserVisible: {
    type: Boolean,
    required: true
  },
})*/

/*表单绑定*/
const dialogForm = ref({
  id: 0,
  username: "",
  phone: "",
  companyName: "",
  accountNonExpired: true,
  accountNonLocked: true,
  credentialsNonExpired: true,
  enabled: true
});

const dialogFormRef = ref<FormInstance>();


/*input输入框规则校验*/
const editRules = reactive<FormRules<typeof dialogForm>>({
  username: [{validator: validatorUsername, required: true, trigger: 'blur'}],
  phone: [{validator: validatorPhone, required: true, trigger: 'blur'}],
  companyName: [{validator: validatorInput, required: true, trigger: 'blur'}],
})

/*监听弹出框的状态(显示 OR 隐藏)*/
watch(
    () => props.dialogEditUserVisible,
    () => {
      if(props.dialogEditUserVisible){
        let userRowInfo = props.userRowInfo;
        dialogForm.value.id = userRowInfo.id;
        dialogForm.value.username = userRowInfo.username;
        dialogForm.value.phone = userRowInfo.phone;
        dialogForm.value.companyName = userRowInfo.companyName;
        dialogForm.value.accountNonExpired = userRowInfo.accountNonExpired;
        dialogForm.value.accountNonLocked = userRowInfo.accountNonLocked;
        dialogForm.value.credentialsNonExpired = userRowInfo.credentialsNonExpired;
        dialogForm.value.enabled = userRowInfo.enabled;
      }
    });

/*修改父组件的数据*/
const emits = defineEmits(["update:modelValue", "initUsersData"]);

/*关闭弹出框*/
const handleClose = () => {
  emits("update:modelValue", false);
}

/*确认提交*/
const handleConfirm =(formEl: FormInstance | undefined) => {
  if(!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      await editUser(JSON.stringify(dialogForm.value)).then(
          (response:RespResult) => {
            if (response.code === SUCCESS) {
              //关闭弹出框
              emits("update:modelValue", false);
              //刷新用户列表
              emits("initUsersData");
            } else {
              ElMessage({
                message: response.message,
                type: "error"
              })
            }
          }
      )
    } else {
      return false;
    }
  })
}
</script>

<style scoped>

</style>